<template>
  <div class="knowledge-res">
    <el-form ref="form" :rules="rules" :model="form" label-width="120px">
      <el-row :gutter="20">
        <el-col :span="14">
          <el-form-item label="素材名称" prop="resName">
            <el-input v-model.trim="form.resName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item label="素材简介" prop="resDes">
            <UEditor
              ref="ueditor"
              :ueWidth="ueWidth"
              :defaultMsg="form.resDes"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-button
      class="save"
      type="custom"
      v-preventReClick
      @click="submitForm('form')"
      >保 存</el-button
    >
  </div>
</template>
<script>
import { sysKnowledgeUpdate } from "@/api/admin/courseLibrary/sysKnowledge.js";
import { setKnoledgeInfo } from "../../mixins/refreshKnowledgeById";
export default {
  mixins: [setKnoledgeInfo],
  data() {
    return {
      form: {
        id: "", //知识点ID
        resName: "", //素材名称
        resDes: "", //素材简介
        resFiled: "", //素材扩展字段
      },
      rules: {
        resName: [
          { required: true, message: "请输入素材名称", trigger: "blur" },
        ],
        resDes: [
          { required: true, message: "请输入素材简介", trigger: "blur" },
        ],
      },
    };
  },
  computed: {
    ueWidth() {
      return this.$store.getters.windowWidth > 1400 ? 820 : 600;
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    //显示弹窗
    init() {
      let curKnoledge = this.$store.getters.curKnoledge;
      this.form.id = curKnoledge.id;
      this.form.resName = curKnoledge.resName;
      this.form.resDes = curKnoledge.resDes;
    },
    submitForm(form) {
      this.form.resDes = this.$refs.ueditor.message;
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.edit();
        }
      });
    },
    //编辑
    edit() {
      sysKnowledgeUpdate(this.form).then((res) => {
        this.getInfoById(); //更新store中数据
        this.$message({
          message: "操作成功",
          type: "success",
        });
      });
    },
    //重置表单
    resetForm(form) {
      this.$refs[form].resetFields();
    },
  },
};
</script>
<style scoped>
.knowledge-res {
  margin-bottom: 30px;
}
.save {
  margin-left: 120px;
}
</style>